<template>
  <div>
    <h3 class="tittle"><span>推荐歌单&gt;</span> </h3>
  <div class="list-conatiner">

    <div v-for="item in ListInfo" class="items" @click="toMusicListDetail">
      <a href="#" class="cover"><img :src="item.url" :key="item.id" /></a>
      <a href="#">
        <p>{{ item.tittle }}</p>
      </a>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: "ListCard",
  data () {
    return {
      ListInfo: [
        {
          url:
            "	https://qpic.y.qq.com/music_cover/IkIkVNibvYCHRF36fb0BNHQKIdKUjZgkuicic0K0zVFichrhwyJMl5neTA/300?n=1",
          id: "1",
          tittle: "极致踩点丨B站高燃混剪收录单"
        },
        {
          url:
            "https://qpic.y.qq.com/music_cover/sMrfR4xnhvohzZMUw6icQ1aEhk8Y4JAr7ianXVxEN0EVGOUStg8RAL4w/300?n=1",
          id: "2",
          tittle: "米津玄师 | 孤独天才的万丈温柔"
        },
        {
          url:
            "https://qpic.y.qq.com/music_cover/tcyic17GVtV8fRdYoxENEmA0a9Zyic4hZiaR2dYyGmu54QBkG3vY1DesUxv4psOib95X/300?n=1",
          id: "3",
          tittle: "日系萌嗓！可爱预警，指数已爆表"
        },
        {
          url:
            "https://qpic.y.qq.com/music_cover/S7Tuv5BQ50vye3rAo7QzjHxIsrCCiaSwfbvuavaWxicub9swm1NOPsHA/300?n=1",
          id: "4",
          tittle: "华语怀旧 | 那些我们怀念的岁月"
        },
        {
          url:
            "https://qpic.y.qq.com/music_cover/lQvH4ZnqWAkI9vJ6GWZIbX9tWdAHhsoa6L1HpuqbovgiaibROiciaQqqYg/300?n=1",
          id: "5",
          tittle: "学习纯音｜一起沉浸在书的海洋叭"
        },
        {
          url:
            "	https://qpic.y.qq.com/music_cover/IkIkVNibvYCHRF36fb0BNHQKIdKUjZgkuicic0K0zVFichrhwyJMl5neTA/300?n=1",
          id: "1",
          tittle: "极致踩点丨B站高燃混剪收录单"
        },
        {
          url:
            "https://qpic.y.qq.com/music_cover/sMrfR4xnhvohzZMUw6icQ1aEhk8Y4JAr7ianXVxEN0EVGOUStg8RAL4w/300?n=1",
          id: "2",
          tittle: "米津玄师 | 孤独天才的万丈温柔"
        },
        {
          url:
            "https://qpic.y.qq.com/music_cover/tcyic17GVtV8fRdYoxENEmA0a9Zyic4hZiaR2dYyGmu54QBkG3vY1DesUxv4psOib95X/300?n=1",
          id: "3",
          tittle: "日系萌嗓！可爱预警，指数已爆表"
        },
        {
          url:
            "https://qpic.y.qq.com/music_cover/S7Tuv5BQ50vye3rAo7QzjHxIsrCCiaSwfbvuavaWxicub9swm1NOPsHA/300?n=1",
          id: "4",
          tittle: "华语怀旧 | 那些我们怀念的岁月"
        },
        {
          url:
            "https://qpic.y.qq.com/music_cover/lQvH4ZnqWAkI9vJ6GWZIbX9tWdAHhsoa6L1HpuqbovgiaibROiciaQqqYg/300?n=1",
          id: "5",
          tittle: "学习纯音｜一起沉浸在书的海洋叭"
        }
      ]
    };
  },
  methods: {
      toMusicListDetail(){
          this.$router.push({ name: "MusicListDetail", params: { id: 1 } });
      }
  },
};
</script>

<style scoped>
.tittle {
  width: 1100px;
  color: #373737;
      font-weight: bold;
      font-size: 23px;
      margin-top: 20px;
}
.tittle span{
    margin-left: 15px;
}
.list-conatiner {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  height: 500px;
  width: 1100px;
  margin-top: -15px;
  /* background-color: #5EE6EB; */
}
.items {
  height: 200px;
  width: 200px;
  color: black;
}
.items img {
  height: 100%;
  width: 100%;
  transition: all 0.4s;
}
.items .cover {
  width: 200px;
  height: 200px;
  overflow: hidden;
  display: block;
  border-radius: 10px;
}
.items img:hover {
  transform: scale(1.1);
}
p {
  text-align: center;
  margin-top: 5px;
  font-size: 14px;
  color: black;
}
p:hover {
  font-weight: 600;
  color: #56bbf1;
}
</style>
